<template>
    <div class="equipmentDataManagement zy-content ">
        <!--查询条件-->
        <div class="search clear">
            <Tabs type="card" v-model="tagName" @on-click="handleChangeTab">
                <TabPane v-for="(item, index) in tagList" :key="index" :label="item.name" :name="item.id">
                </TabPane>
            </Tabs>
            <div class="searchBox">
                <Form label-position="left" :label-width="100" class="search-form">
                    <Row :gutter="16">
                        <Col span="4">
                            <FormItem label="对比结果：">
                                <Select v-model="searchParams.fstatus" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                                    <Option v-for="(item,index) of statusList" :value="item.id" :key="index">{{ item.name }}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="7">
                            <FormItem label="盘点时间：">
                                <DatePicker
                                        v-model="dateTimeRange"
                                        type="datetimerange"
                                        placement="bottom-end"
                                        :placeholder="`${$t('common.selectInfo')}`"
                                        @on-change="handleRangeChange"
                                />
                            </FormItem>
                        </Col>
                        <Col span="5">
                           <FormItem :label="`${$t('fault.FunctionalLocation')}:`" >
                                <Cascader :data="orgList" v-model="searchParams.orgId" :placeholder="`${$t('common.selectInfo')}`" change-on-select></Cascader>
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem label="盘点人：">
                                <Input type="text" v-model="searchParams.user" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                            </FormItem>
                        </Col>
                        <Col span="4" align="center">
                            <Button type="primary" @click="changeNum()" v-if="checkBtnPermission.dmsDeviceTzGetDevicePdList">{{$t('common.Query')}}</Button>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div class="btns clear">
                <!--            <strong class="creatBtnleft"><Button type="primary" shape="circle">批量删除</Button></strong>&ndash;&gt;-->
                <span  class="creatBtnright" @click="handleHelp">
                            <span><Icon type="ios-help-circle-outline" /></span>
                            <span class="rightbtn">帮助</span>
                        </span>
                <span  class="creatBtnright" @click="exportTemplateClick" v-if="checkBtnPermission.dmsDeviceTzExportPd">
                            <span><Icon type="ios-cloud-download-outline"/></span>
                            <span class="rightbtn">导出盘点记录</span>
                        </span>
            </div>
            <!--表格-->
            <div class="tableContent">
                <Table style="margin-top: 10px" row-key="id" :columns="columns" :data="dataSource">
                    <template slot-scope="{ row }" slot="action">
                        <span class="operationBtn" @click="handlePrint(row)">打印二维码</span>
                    </template>
                </Table>
            </div>
            <div class="pageWrap">
                <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
            </div>
        </div>
        <Modal :mask-closable="false"
                v-model="helpVisible"
                title="帮助"
                :footer-hide="true"
        >
            <p class="help">对比结果：</p>
            <p class="help"> 一致：盘点记录的位置与设备台账位置一致。</p>
            <p class="help">不一致：盘点记录的位置与设备台账位置不一致。</p>
            <p class="help">新增：盘点记录存在该设备，但设备台账不存在该设备（任何区域都不存在）。</p>
            <p class="help">缺失：盘点记录不存在该设备，但是设备台账存在该设备。</p>

        </Modal>
    </div>
</template>

<script>
    import fileDownload from 'js-file-download'
    import recursion from '../../../util/recursion'
    export default {
        name: "equipmentsStocktaking",
        data() {
            return {
                tagName: '',
                total: 0,
                pageNum: 1,
                pageSize: 10,
                helpVisible: false,
                checkBtnPermission: {},
                searchParams: {
                    // dateTimeRange: [],
                },
                pageSizeOption: [10,20,30],
                statusList: [{id: '',name: '全部'}, {id: 0,name: '一致'}, {id: 1,name: '不一致'},{id: 2,name: '缺失'},{id: 3,name: '新增'}],
                columns: [
                    {
                        title: '盘点时间',
                        key: 'createTime',
                        align: 'center',
                        minWidth: 200,
                        render: (h, params) => {
                            return h('div', params.row.createTime ? this.$moment(params.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '')
                        }
                    },
                    {
                        title: '设备状态',
                        key: 'status',
                        align: 'center',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div',params.row.status === 0 ? '待到位' : params.row.status === 1 ? '到位中' : params.row.status === 2 ? '已到位待安调' : params.row.status === 3 ? '安调中' : params.row.status === 4 ? '已安调待验收' : params.row.status === 5 ? '验收中' : params.row.status === 6 ? '已验收' : '已入账')
                        }
                    },

                    {
                       title: `${ this.$t('preliminary.Entity') }`,
                        key: 'belongCompanyName',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                        title: '使用公司',
                        key: 'useCompanyName',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                        title: '台账功能位置',
                        key: 'orgNameOld',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                        title: '盘点功能位置',
                        key: 'orgName',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                        title: `${ this.$t('maintenance.EquipmentNo') }`,
                        key: 'deviceMId',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                       title: `${ this.$t('maintenance.EquipmentName') }`,
                        key: 'deviceName',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                        title: '固定资产编号',
                        key: 'assetsNo',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'specification',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                        title: '盘点人',
                        key: 'createBy',
                        align: 'center',
                        minWidth: 150,
                    },
                    {
                        title: '对比结果',
                        key: 'fstatus',
                        align: 'center',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div',params.row.fstatus === 0 ? '一致' : params.row.fstatus === 1 ? '不一致' : params.row.fstatus === 2 ? '缺失' : '新增')
                        }
                    },
                    // {
                    //     title: `${ this.$t('common.operation') }`,
                    //     slot: "action",
                    //     width: 180,
                    //     align: "center",
                    //     fixed: 'right',
                    // }
                ],
                dataSource: [],
                tagList: [{id: '', name: '全部'}],
                orgList: [],
                dateTimeRange: []
            }
        },
        created() {
            this.dateTimeRange[0] = this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD 00:00:00')
            this.dateTimeRange[1] = this.$moment(new Date()).format('YYYY-MM-DD 23:59:59')
            this.searchParams.beginTime = this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD 00:00:00')
            this.searchParams.endTime = this.$moment(new Date()).format('YYYY-MM-DD 23:59:59')
            this.getCompanyList()
            this.getOrgList()
            this.searchList()
            // console.log(this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD HH:mm:ss'))
        },
        mounted(){
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="dmsDeviceTzGetDevicePdList"){
                    this.checkBtnPermission.dmsDeviceTzGetDevicePdList = true
                }
                if(item.code=='dmsDeviceTzExportPd') {
                    this.checkBtnPermission.dmsDeviceTzExportPd = true
                }
            }
        },
        methods: {
            handleChangeTab(name) {
                this.dateTimeRange = []
                this.tagName = name
                this.searchParams = {}
                this.dateTimeRange[0] = this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD 00:00:00')
                this.dateTimeRange[1] = this.$moment(new Date()).format('YYYY-MM-DD 23:59:59')
                this.searchParams.beginTime = this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD 00:00:00')
                this.searchParams.endTime = this.$moment(new Date()).format('YYYY-MM-DD 23:59:59')
                this.searchParams.companyId = name
                this.searchList()
            },
            handleHelp() {
                this.helpVisible = true
            },
            exportTemplateClick() {
                if (!this.searchParams.beginTime || !this.searchParams.endTime) {
                    this.$Message.warning(({content:'请选择盘点时间！',duration:6,closable:true}));
                    return false
                }
                let params = {};
                for (let key in this.searchParams) {
                    if (key === 'orgId' && this.searchParams['orgId']) {
                        const arr = this.searchParams[key]
                        const { length, last=length-1 } = arr
                        this.$set(params, key, arr[last])
                    }else {
                        if (this.searchParams[key] || key === 'fstatus') {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }
                }
                const filName = '设备盘点'
                this.axios({
                    method: 'get',
                    url: '/dms/dmsDeviceTz/exportPd',
                    responseType: 'blob',
                    params: params
                }).then(res => {
                    fileDownload(res, filName + '.xlsx')
                })

            },
            handleRangeChange(val) {
                console.log(val)
                this.searchParams.beginTime = val[0]
                this.searchParams.endTime = val[1]
            },
            //分页
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList() {
                if (!this.searchParams.beginTime || !this.searchParams.endTime) {
                    this.$Message.warning(({content:'请选择盘点时间！',duration:6,closable:true}));
                    return false
                }
                let params = {
                    // companyId: this.tagName,
                    pageNo:this.pageNum,
                    pageSize:this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (key === 'orgId' && this.searchParams['orgId']) {
                        const arr = this.searchParams[key]
                        const { length, last=length-1 } = arr
                        this.$set(params, key, arr[last])
                    }else {
                        if (this.searchParams[key] || key === 'fstatus') {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }
                }
                this.axios({
                    method: 'get',
                    url: '/dms/dmsDeviceTz/getPdList',
                    params: params
                }).then(res => {
                    
                    if(res.code === 200){
                        this.dataSource = res.data.list
                        this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            handlePrint() {

            },
            //公司列表
            getCompanyList() {
                this.axios({
                    method: 'get',
                    url: '/basic/company/getCompanyListByUser',
                    params: {}
                }).then(res => {
                    
                    if(res.code === 200){
                        let arr = res.data.map(item => {
                            return {
                                ...item,
                                id: item.id.toString()
                            }
                        })
                        this.tagList = [...this.tagList,...arr]
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            getOrgList() {
                this.axios({
                    method: 'get',
                    url: '/basic/organization/findListByToken',
                    params: {}
                }).then(res => {
                    if(res.code === 200){
                        const obj ={
                            label: 'name',
                            value: 'code',
                            children: 'children'
                        }
                        this.orgList = recursion.convertTree(res.data, obj)
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
        }

    }
</script>

<style scoped lang="scss">
    .equipmentDataManagement {
        .ivu-tabs.ivu-tabs-card {
            .ivu-tabs-tab {
                width: 120px !important;
                text-align: center;
            }
            /deep/.ivu-tabs-tab.ivu-tabs-tab-active {
                color: #ffffff;
                background-color: #2d8cf0;
            }
        }
    }
    .help {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        line-height: 28px;
        white-space: nowrap;
    }
</style>
